<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta id="viewport" name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
    <style>

        .container {
            text-align: center;
        }

        .container > div {
            margin: 200px auto;
        }

        label {
            text-align: right;
        }
    </style>
</head>

<body>
<div class="container">
    <div>
        <form method="post">
            <div class="form-group row">
                <label for="email" class="col-4 col-form-label">邮&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
                <div class="col-4">
                    <input type="text" class="form-control" id="email" name="email">
                </div>
            </div>
            <div class="form-group row">
                <label for="password" class="col-4 col-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <div class="col-4">
                    <input type="password" class="form-control" id="password" name="password">
                </div>
            </div>
            <br>
            <div>
                <button id="login" type="button" class="btn btn-primary btn-submit col-4">登录</button>
            </div>
            <br>
            <div>
                <a href="register.html">注册新账号</a>
            </div>
        </form>
    </div>
</div>
<script>
    $("#login").click(function () {

        if (!check()) {
            return false;
        }

        var email = $("#email").val();
        var password = $("#password").val();

        $.post("http://www.test.com/api/user/login/" + email + "/" + password, function (result) {

            if (result !== null && result !== "null" && result !== "") {
                $(location).attr('href', 'welcome.html');

            } else {
                alert("邮箱或密码错误");
            }
        });
    })

    function check() {
        var email = $("#email");
        email.val($.trim(email.val()));

        var password = $("#password");
        password.val($.trim(password.val()));

        // 必须输入检查
        if (email.val() === "") {
            alert("邮箱不能为空");
            return false;
        }

        if (password.val() === "") {
            alert("密码不能为空");
            return false;
        }

        return true;
    }
</script>
</body>
</html>